import React from 'react';
import { View, Text } from '@tarojs/components';
import ZbSwiper from '@/comps/common/Swiper';
import { useLocalStore } from 'mobx-react';
import authStore from '@/store/auth';
import ZbSeparator from '@/comps/common/Separator';
import ZbGrid from '@/comps/common/Grid';
import ZbTitle from '@/comps/common/Title';
import ZbCard from '@/comps/common/Card';
import tableIcon from '@/public/img/table.png';
import './index.scss';
import ZbLogin from '@/comps/login';

type PageStateProps = {
  store: {
    counterStore: {
      counter: number;
      increment: Function;
      decrement: Function;
      incrementAsync: Function;
    };
  };
};

interface Index {
  props: PageStateProps;
}

const Index = () => {
  const localAuth = useLocalStore(() => authStore);

  const [isLogin, setIsLogin] = React.useState<boolean>(false);

  React.useEffect(() => {
    console.log('localAuth', localAuth);
    if (!localAuth.check()) {
      //弹出登陆弹出框
      setIsLogin(true);
    }
  }, [localAuth]);

  // 关闭登录弹框的回调
  const onLoginClose = () => {
    setIsLogin(false);
  };

  return (
    <View>
      <View className="p-2">
        <ZbSwiper data={[1, 2]} height={120} itemStyle={{ borderRadius: '10px' }} />
      </View>
      <ZbSeparator bgColor="#F5F3FF" />
      <View>
        <ZbGrid
          data={[
            { url: '', title: '上传题库' },
            { url: '', title: '进入考试', route: '/pages/question/content/index' },
            { url: '', title: '客服导题' },
            { url: '', title: '邀请特权' },
          ]}
        />
      </View>
      <ZbSeparator bgColor="#F5F3FF" />
      <ZbTitle icon={<Text className="fa fa-game pr-10px text-purple-700" />} title="游戏专区" />
      <ZbCard columnNum={2} data={[{ url: tableIcon, title: '舒尔特方格', remark: '锻炼 [专注力]', route: '/pages/schulte/index' }]} />

      <ZbSeparator bgColor="#F5F3FF" />
      <ZbTitle icon={<Text className="fa fa-game pr-10px text-purple-700" />} title="热门题库" />

      {/*登录弹框*/}
      <ZbLogin authStore={localAuth} isShow={isLogin} onClose={onLoginClose} />

      {/* <View className="pr-10">
        <Button onClick={increment}>+</Button>
        <Button onClick={decrement}>-</Button>
        <Button onClick={incrementAsync}>Add Async</Button>
        <Observer>{() => <Text>{localCounter.counter}</Text>}</Observer>
      </View> */}
    </View>
  );
};

export default Index;
